<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    >
    <meta
        http-equiv="X-UA-Compatible"
        content="ie=edge"
    >
    <title>自定义指令</title>
    <script src="../vue.js"></script>
</head>


<body>
    <!--
   需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
   需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
   
   自定义指令总结：
			一、定义语法：
						(1).局部指令：
							new Vue({directives:{指令名:配置对象} })   或  new Vue({directives: {指令名:回调函数}})
						(2).全局指令：
							Vue.directive(指令名,配置对象) 或  Vue.directive(指令名,回调函数)

			二、配置对象中常用的3个回调：
						(1).bind：指令与元素成功绑定时调用。
						(2).inserted：指令所在元素被插入页面时调用。
						(3).update：指令所在模板结构被重新解析时调用。

			三、备注：
				         1.指令定义时不加v-，但使用时要加v-；
						 2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
-->
    <!--下面的这是模版，要经过vue的解析才能放到页面中，dom树里-->
    <div id="root">
        <h2>当前的n值是：<span v-text="n"></span></h2>
        <!--    <h2>放大10倍后的n值是: <span v-big-number="n"></span></h2>-->
        <h2>放大10倍后的n值是: <span v-big="n"></span></h2>
        <button @click="n++">点我n+1</button>
        <p>测试指令函数所调用的时机: {{ name }} </p>
        <hr />
        <input
            type="text"
            v-fbind:value="n"
        />
    </div>

    <div id="root2">
        <!-- <input type="text" v-fbind:value="x"/> -->
    </div>




    <script type="text/javascript">
        Vue.config.productionTip = false;
        //此时自定义fbind指令使全局指令了，其他vue实例所管理的容器也可以使用
        //全局指令
        Vue.directive('fbind', {
            bind (el, binding) {
                console.log('bind')
                el.value = binding.value
            },
            //指令被插入页面时
            inserted (el, binding) {
                console.log('inserted')
                el.focus()
            },
            //指令所在模版被重新解析时
            update (el, binding) {
                el.value = binding.value
                console.log('update') 
            }
        })
        const vm = new Vue({
            el: "#root",
            data: {
                name: '上海',
                n: 1
            },
            //定义指令的配置项: directives
            directives: {
                //   两种写法:
                //   1.对象(key-value):可以做些细节上的操作
                //   2.函数


                //  big函数的调用时机:
                //         1.指令与元素成功绑定(但注意此时dom元素还没有成功的被弄到页面上去)时会被调用 (首次,类似于dom元素一加载)
                //         2.指令所在的模版被重新解析时会被再次调用
                big (element, binding) {
                    // console.log(this); //注意此处this===window vue实例对象此时'不管'你写在指令里面的函数了
                    // console.log('big被调用啦！')
                    //收到两个参数，第一个参数代表真实dom元素，第二个参数是绑定对象，关注该绑定对象中的value属性
                    // console.log(element,binding);
                    //原生dom的操作
                    element.innerText = binding.value * 10;
                },

                // // 复合单词命名需要用''包裹起来
                // 'big-number':function(element, binding) {
                //     element.innerText = binding.value * 10;
                // },


                //自定义fbind绑定
                //换成对象写法 对比函数简写方式其实只是多了 inserted钩子
                // fbind: {
                //     // 指令与元素成功绑定（一上来）
                //     bind (el, binding) {
                //         // console.log('bind')
                //         el.value = binding.value;
                //     },
                //     //指令所在元素被插入页面时
                //     inserted (el, binding) {
                //         // console.log('inserted')
                //         el.focus();
                //     },
                //     //指令所在模版被重新解析时
                //     update (el, binding) {
                //         // console.log('update');
                //         el.value = binding.value;
                //     }
                // }
            }
        });

        const vm2 = new Vue({
            el: '#root2',
            data: {
                x: 1,
            }
        })
    </script>
</body>

</html>